import React, { useState } from 'react';
import './AddPrinterDialog.css';

interface AddPrinterDialogProps {
  isOpen: boolean;
  onClose: () => void;
  onSubmit: (printerData: PrinterFormData) => void;
}

export interface PrinterFormData {
  name: string;
  ip: string;
  port: number;
  enableColor: boolean;
  description?: string;
}

const AddPrinterDialog: React.FC<AddPrinterDialogProps> = ({ isOpen, onClose, onSubmit }) => {
  const [formData, setFormData] = useState<PrinterFormData>({
    name: '',
    ip: '',
    port: 9100,
    enableColor: false,
    description: ''
  });

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    onSubmit(formData);
    onClose();
  };

  if (!isOpen) return null;

  return (
    <div className="dialog-overlay">
      <div className="dialog-content">
        <h2>添加新打印机</h2>
        <form onSubmit={handleSubmit}>
          <div className="form-group">
            <label htmlFor="name">打印机名称</label>
            <input
              type="text"
              id="name"
              value={formData.name}
              onChange={(e) => setFormData({ ...formData, name: e.target.value })}
              required
            />
          </div>
          
          <div className="form-group">
            <label htmlFor="ip">IP地址</label>
            <input
              type="text"
              id="ip"
              value={formData.ip}
              onChange={(e) => setFormData({ ...formData, ip: e.target.value })}
              required
              pattern="^(?:[0-9]{1,3}\.){3}[0-9]{1,3}$"
            />
          </div>

          <div className="form-group">
            <label htmlFor="port">端口</label>
            <input
              type="number"
              id="port"
              value={formData.port}
              onChange={(e) => setFormData({ ...formData, port: parseInt(e.target.value) })}
              required
              min="1"
              max="65535"
            />
          </div>

          <div className="form-group">
            <label htmlFor="description">描述</label>
            <textarea
              id="description"
              value={formData.description}
              onChange={(e) => setFormData({ ...formData, description: e.target.value })}
            />
          </div>

          <div className="form-group checkbox-group">
            <label>
              <input
                type="checkbox"
                checked={formData.enableColor}
                onChange={(e) => setFormData({ ...formData, enableColor: e.target.checked })}
              />
              启用彩色打印
            </label>
          </div>

          <div className="dialog-actions">
            <button type="button" className="btn btn-secondary" onClick={onClose}>
              取消
            </button>
            <button type="submit" className="btn btn-primary">
              添加
            </button>
          </div>
        </form>
      </div>
    </div>
  );
};

export default AddPrinterDialog; 